<template>
    <div class="wrap">
        <div class="wrap-top">
            <div class="wrap-title">
                <Icon type="ios-trending-up"/>
                <span>关键数据实时指标</span>
            </div>
            <div class="weather">
                <p>青岛</p>
                <p>
                    <span>多云</span>
                    <span class="temperature">
                        <i class="temperature-start">12℃</i>
                        <i>~</i>
                        <i class="temperature-end">24℃</i>
                    </span>
                </p>
                <p>星期四</p>
            </div>
        </div>
        <div class="wrap-bottom">
            <Row>
                <i-col :lg="{ span: 4,offset:item.offset }" :style="{background:item.color}" v-for="(item,index) in list" :key="index" class="wrap-bottom-list">
                    <h2>{{item.quantity}}</h2>
                    <p>{{item.title}}</p>
                    <Icon :type="item.icon" class="wrap-bottom-list-icon"/>
                </i-col>
            </Row>
        </div>
    </div>
</template>

<script>
export default {
    name: 'HomeTop',
    data() {
        return {
            list: [
                { title: '对接处理任务', color: '#fc8675', quantity: '8', icon: 'ios-bonfire', offset: 1 },
                { title: '对私待签收任务', color: '#46BFBD', quantity: '11', icon: 'ios-briefcase-outline' },
                { title: '对公待处理任务', color: '#f3ce85', quantity: '2', icon: 'logo-buffer' },
                { title: '对公待签收任务', color: '#949FB1', quantity: '3', icon: 'ios-color-fill-outline' },
                { title: '本月交易订单总量', color: '#65cea7', quantity: '444', icon: 'ios-film-outline' }
            ]
        };
    }
};
</script>

<style lang="less" scoped>
.wrap {
    background: #fff;
    border: 1px solid #ddd;
    .wrap-top {
        padding-left: 20px;
        padding-right: 20px;
        height: 35px;
        font-size: 13px;
        line-height: 35px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ddd;
        span {
            margin-left: 10px;
        }
        .temperature {
            margin: 0 10px;
            .temperature-start {
                color: #c30;
            }
            .temperature-end {
                color: #390;
            }
        }
        .weather {
            display: flex;
            img {
                display: inline;
            }
        }
    }
    .wrap-bottom {
        margin: 15px 0;
        color: #fff;
        .wrap-bottom-list {
            padding: 20px 10px 10px 20px;
            position: relative;
            margin-left: 2.8%;
            p {
                font-size: 14px;
            }
            .wrap-bottom-list-icon {
                position: absolute;
                top: 30px;
                right: 20px;
                font-size: 55px;
                opacity: 0.6;
            }
        }
        h2 {
            font-size: 35px;
        }
    }
}
</style>
